<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移除节点</title>
</head>
<body>
<div id="container" >

    <div id="other" style="" name="" class="" title="">
        杂项
    </div>
    <ul id="lunch">
        <li>麻婆豆腐</li>
        <li>啤酒鸭</li>
        <li>辣子鸡</li>
        <li>麻辣香锅</li>
        <li>拌粉</li>
    </ul>
</div>
<button type="button" onclick="remove()">点击移除节点</button>
<script type="text/javascript">
    function remove(){
        let ul = document.querySelector("#lunch");
        //ul.removeChild(ul.childNodes[0]);//双击两次才可移除(空白文本也是一个节点)
        ul.removeChild(ul.firstElementChild);
    }
    /*
        element.parentNode 获得 element 元素的 父节点  parentElement
        element.previousSibling 返回 element 之前的那个兄弟节点 (相邻，可能是文本)
        element.previousElementSibling 返回 element 之前的那个 兄弟 元素 (相邻节点)
        element.nextElementSibling 返回 element 之后的那个 兄弟 元素 (相邻节点)
        element.nextSibling 返回 element 之后的那个兄弟节点 (相邻，可能是文本)
        element.childNodes 获得 element 元素的 所有 子节点 ( 含 文本 和 注释 )
        element.attributes 获得 element 元素的 所有属性
        element.firstChild 获得 element 元素的 第一个 子节点 ( 可能是 文本 )
        element.firstElementChild 获得 element 元素的第一个 子元素
        element.lastElementChild 获得 element 元素的最后一个 子元素
        element.lastChild 获得 element 元素的 最后一个 子节点 ( 可能是 文本 )
    * */
</script>

</body>
</html>